今天來完成事件的目標，但一天處理不完，會分成 2 天來敘述

• [ ] 增加事件
  • [ ] 新增
  • [ ] 編輯
  • [ ] 刪除項目
  • [ ] 標記完成

首先先來處理 標記完成 的部分，這個最簡單

在 todo_list.py 增加一個函式

def toggle_finish(self):
    self.finished = not self.finished

    return self.finished

接著在 action_view.js 的 IronmanActionView 裡增加 events 屬性

增加對應的事件與函式

events: {
    'change .finished': '_toggleFinish',
},

// ...

_toggleFinish: function (ev) {
    let target = ev.currentTarget,
        index = target.dataset.index;

    if (!index) {
        return true;
    }

    let data = this.todoList.at(parseInt(index));

    this._rpc({
        model: 'todo.list',
        method: 'toggle_finish',
        args: [[data.id]]
    }).then(result => {
        target.checked = !!result;
    });

    return true;
},

接著處理 刪除項目

因後端已經有先定義好 unlink 了，所以這裡只要加入事件就好

先在 events 增加一行

'click i.fa-times': '_removeItem',

接著增加函式

_removeItem: function (ev) {
    const self = this;
    let target = ev.currentTarget,
        data_index = target.dataset.index;

    if (!data_index) {
        return true;
    }
    let index = parseInt(data_index);

    let data = this.todoList.at(index);

    if (!data) {
        return true;
    }

    this._rpc({
        model: 'todo.list',
        method: 'unlink',
        args: [[data.id]]
    }).then(result => {
        if (result) {
            self.todoList.splice(index, 1);
            self.renderElement();
        }
    });
},

重新整理網頁後，各位可以測試一下點後面的 x 有沒有動靜

是不是發現沒有動作，但記錄已經刪除了

而 action view 也不是 _render() ，是 renderElement()

為什麼呢?

請容許筆者混個一天賣個關子，明天帶各位看一下底層

回到問題，我們改一下 action view 的屬性名稱

把 template 改成 contentTemplate

完成後重新整理網頁，在嘗試看看是否刪除後畫面會有變化